<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <!-- 逻辑复杂，可读性差，违背初心（使用简单的js表达式） -->
      <h1>{{ message.split('').reverse().join('') }}</h1>
      <!-- 通过计算属性来优化 -->
      <hr>
      <h1>{{reverseMsg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        // 数据
        data: {
          message: 'hi vue'
        },
        methods: {},
        // vue的配置选项：computed
        // 计算属性
        computed: {
          // 属性名 计算属性的名称
          // 属性值 计算属性的处理函数
          // reverseMsg : function () {
          reverseMsg () {
            // 依赖data中的数据，进行一定的逻辑处理，得到一个新数据
            const newMsg = this.message.split('').reverse().join('')
            // 必须将新数据返回出去
            return newMsg
          }
          // reverseMsg 就是数据名称，在模板中使用data中数据一致
        }
      })
    </script>
  </body>
</html>